<template>
	<view class="wallet">
		<view class="wallet-container">
			<view class="header-box">
				<view class="price1">余额</view>
				<view class="price">￥
					<text>{{allmoney}}</text>
				</view>
			</view>
            <navigator class="qu" url='/pages/moneyclass/moneyclass'>去提现</navigator>
		</view>
        <view class="wallet-list">
        	<view class="withdrawal-box">
        		<view class="withdrawal">
        			<view class="withdrawaltop">
        				已提现
        			</view>
        			<view class="withdrawalbuttom">
        				{{tixianmoney}}
        			</view>
        		</view>
        		<view class="withdrawal">
        			<view class="withdrawaltop">
        				结算中
        			</view>
        			<view class="withdrawalbuttom">
        				{{jiesuanmoney}}
        			</view>
        		</view>
        	</view>
        </view>
        <view class="dealbox" bindtap="show">
        	<view class="dealtext">全部收益类型</view>
        	<view class="dealicon"
        		style="background-image:url('https://6775-guess-9gpx4635bd56e954-1304086925.tcb.qcloud.la/dealbottom.png?sign=ecbc1b047f07054f5f5b686989ed0088&t=1606726382')">
        	</view>
        </view>
        <view class="listbox">
        	<block v-for="(item,index) in walletList" :key="index" >
        			<view class="wallet-item f-nw f-a-c f-j-b"  @click="gopath(item)">
        				<view class="wallet-item-detail f-nw f-a-c">
        					<view class="user-img-wrap">
        						<image mode="aspectFill" class="img-100" :src="item.avatar_url"></image>
        					</view>
        					<view style="width:400rpx;">
        						<view class="user-name">{{item.nick_name}}</view>
        						<view v-if="active == 8" class="create-time1">来自{{item.type == 2 ? '引流红包' : item.type==4 ? '购物红包' : item.type == 5 ? '拼局返款':item.type == 6 ?'补贴红包':item.type == 7 ? '下级升级收益':''}}</view>
        						<view class="create-time">{{item.aa}}</view>
        						<view class="earnings-type">{{item.remark}}</view>
        					</view>
        				</view>
        				
        				<view class="wallet-item-price">+{{item.money}}</view>
        				 <image class="tuikuan" src="../../static/img01/right.png"></image>
        			</view>
        		</block>
        		<view class="loadmore-bottom" v-if="walletList.length == 0">暂无更多信息</view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				allmoney: 0,
                tixianmoney: 0,
                jiesuanmoney: 0,
                walletList: [{
                    nick_name: 1,
                    type: 1,
                    aa: 1,
                    remark: 1,
                    money: 1,
                }],
			}
		},
		methods: {
			gopath(item) {
                uni.navigateTo({
                    url: "/pages/walletDetails/walletDetails?item="+JSON.stringify(item)
                })
            }
		},
        created() {
            let uid = uni.getStorageSync("userInfo").id;
            this.$api.getMy_bill({user_id: uid}).then(res=>{
                this.allmoney = res.data.all_money
                this.tixianmoney = res.data.tixianmoney
                this.jiesuanmoney = res.data.settling
            })
            this.$api.getMyIncome({
                user_id: uid,
                type: 8
            }).then(res=>{
                this.walletList = res.data;
            })
        }
	}
</script>

<style>
/* pages/wallet/wallet.wxss */
page{
  --font-weight-bold:550
}
.wallet{
  width: 100%;
  height: 100%;
  background-color: white;
  position: relative;
}
.wa{
  width: 100%;
  height: 128rpx;

}
.header-box{
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #79e379, #60cc60);
  
}
.wallet-container{
  width: 100%;
  height: 340rpx;
  margin: 0 auto;
  border-radius: 8rpx;
  font-size: 28rpx;
}
.wallet-container .title{
  position: absolute;
  left: 47rpx;
  top: 46rpx;
  font-size: 28rpx;
  color: #fff
}
.GoBankCard{
  position: absolute;
  right: 50rpx;
  top: 30rpx;
  font-size: 28rpx;
  color: #fff
}
.withdrawHistory{
  color: white;
  text-decoration: underline;
  position: absolute;
  bottom: 57rpx;
  right: 94rpx;
  font-size: 34rpx;
}
.wallet-container .price{
  position: absolute;
  top: 77px;
  left: 72rpx;
  right: 0;
  margin: auto;
  color: #fff;
  font-size: 60rpx;
  font-weight: 300
}
.qu{
  position: absolute;
  top: 57px;
  right: 44rpx;
  margin: auto;
  width: 200rpx;
  height: 80rpx;
  border-radius: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: white;
  color: #49e461;
  font-size: 40rpx;
  font-weight: 300
  
}
.wallet-container .price1{
  position: absolute;
  top: 50px;
  left: 80rpx;
  margin: auto;
  color: #fff;
  font-size: 40rpx;
  font-weight: 300
}
.wallet-container .price text{
  font-size: 70rpx
}
.tixian{
  width: 200rpx;
  height: 67rpx;
  font-size: 28rpx;
  line-height: 67rpx;
  border-radius: 67px;
  background-color: #fff;
  color: #F04847;
  position: absolute;
  bottom: 57rpx;
  left: 0;
  right: 0;
  margin: auto
}

.detail{
  padding:23rpx 31rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  background-color: #fff;
  margin-top: 30rpx;
  display: flex;
  justify-content: space-between
}
.detail picker{
  margin-bottom: 10rpx;
  font-size: 26rpx;
  font-weight:500;
}
.detail .sum-price{
  font-size: 26rpx;
  color: #E94545
}

.wallet-list{
  margin-top: 24rpx;
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
  /* transform: translateY(-20rpx); */
  width: 100%;
}
.withdrawal-box{
  border-radius: 20rpx;
  width: 92%;
  height: 200rpx;
  display: flex;
  margin: 0 auto;
  background-color: white;
  transform: translateY(-100rpx);
  justify-content: space-around;
  box-shadow: 0rpx 9rpx 20rpx #49e461;
  z-index:999
}
.withdrawal{
  width: 30%;
  height: 100%;
 
}
.withdrawaltop{
  text-align: center;
  margin-top: 50rpx;

}
.withdrawalbuttom{
  text-align: center;
  color: #ccc;
  margin-top: 10rpx;

}
.wallet-border{
  border-top-left-radius: 15rpx;
  border-top-right-radius: 15rpx;
}
.wallet-item{
  font-size: 26rpx;
  padding: 24rpx;
  border-bottom: 2rpx solid #eee;
  line-height: 1;
  position: relative;
}
.tuikuan{
  width: 50rpx;
  height: 50rpx;

}
.user-img-wrap{
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 23rpx
}
.user-name{
  margin-bottom: 10rpx
}
.create-time{
  color: #6F6F6F;
  font-size: 24rpx;
}
.create-time1{
  color: #6F6F6F;
  font-size: 24rpx;
  margin-bottom: 10rpx;
}
.create-times{
  color: #6F6F6F;
  font-size: 24rpx;
  margin-top: 10rpx;
}
.earnings-type{
  font-size: 24rpx
}
.wallet-item-price{
  font-size: 32rpx
}


.wallet-items{
  font-size: 26rpx;
  padding: 35rpx 24rpx;
  border-bottom: 2rpx solid #eee;
  line-height: 1;
  align-items: center;
}
.wallet-item-details{
  align-items: center;
}
.dealbox{
  width: 100%;
    padding: 30rpx 0;
    height: 40rpx;
    background-color: #f1f1f1;
    text-align: center;
    display: flex;
    transform: translateY(-34rpx);
    justify-content: center;
}
.dealtext{
  font-size: 30rpx;
  margin-right: 14rpx;
}
.dealicon{
  width: 40rpx;
  height: 40rpx;
  background-repeat: no-repeat;
  margin-top: 2rpx;
  background-size: 100% 100%;
}
.choose{
  width: 100%;
  height: 100rpx;
  font-size: 32rpx;
  line-height: 100rpx;
  text-align: center;
}
.typelist{
  width: 100%;
  height:calc(100% - 100rpx) ;
  display: flex;
  flex-wrap: wrap;
}
.typebox{
  width: 30%;
  height: 70rpx;
  text-align: center;
  line-height: 70rpx;
  background-color: #60cc60;
  border-radius: 10rpx;
  margin: 24rpx 1.6%;
  color: white;
}
.typebox1{
  width: 30%;
  height: 70rpx;
  text-align: center;
  line-height: 70rpx;
  border-radius: 10rpx;
  box-shadow: 0rpx 0rpx 4rpx #999;
  margin: 24rpx 1.6%;
  background-color: white;
  color: #666;
}
</style>
